<template>
	<view class="mjcLoading justify-content ">
		<view class="bounceBall">
			<view class="ball red"></view>
			<view class="shadow"></view>
		</view>
		<view class="bounceBall gBall">
			<view class="ball green"></view>
			<view class="shadow"></view>
		</view>
		<view class="bounceBall bBall">
			<view class="ball blue"></view>
			<view class="shadow"></view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {

			}
		},
		methods: {},
		created() {

		}

	}
</script>

<style scoped lang="less">
	.mjcLoading {
		height: 100vh;
		align-items: center;

		.red {
			background: linear-gradient(#e55, #b00);
		}

		.blue {
			background: linear-gradient(#00a8ff, #8c7ae6);
		}

		.green {
			background: linear-gradient(rgb(161, 201, 128), rgb(1, 99, 37));
		}

		.bounceBall {
			width: 100rpx;
			height: 100rpx;

		}

		.bBall .ball {
			animation-delay: 50ms;
		}

		.gBall .ball {
			animation-delay: 80ms;
		}


		.ball {
			width: 50rpx;
			height: 50rpx;
			border-radius: 50%;

			animation: move 500ms infinite alternate;
		}


	}

	@keyframes move {
		from {
			transform: translateY(0);
		}

		to {
			transform: translateY(-50rpx);
		}
	}
</style>
